<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Quote Machine</title>
    <style>
        body {
            background: #000;
        }

        #app {
            padding: 30px;
        }

        #quote-box {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #fff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 100px rgba(255, 255, 255, 0.2) inset;
            padding: 30px;
            border-radius: 10px;
        }

        #text {
            font-size: 30px;
            font-weight: 600;
            color: #fff;
            text-shadow: 0 0 20px #fff;
        }

        #author {
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            text-shadow: 0 0 16px #fff;
            text-align: right;
        }

        #new-quote {
            background: none;
            border: none;
            color: #fff;
            outline: none;
            cursor: pointer;
            transition: 0.2s;
            padding: 10px;
            font-size: 12px;
        }

        #new-quote:hover,
        #tweet-quote:hover {
            text-shadow: 0 0 5px #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 4px -3px white;
        }

        #tweet-quote {
            color: #fff;
            font-size: 12px;
            padding: 10px;
            text-decoration: none;
            transition: 0.2s;
            display: inline-block;
        }

    </style>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
    const projectName = "random-quote-machine";
    localStorage.setItem('example_project', 'Randowm Quote Machine');

    class App extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                quotes:[{
                    "quote":"You may be disappointed if you fail, but you are doomed if you don’t try.","author":"Beverly Sills"},
                    {
                        "quote":"Remember no one can make you feel inferior without your consent.","author":"Eleanor Roosevelt"},
                    {
                        "quote":"Life is what we make it, always has been, always will be.","author":"Grandma Moses"},
                    {
                        "quote":"The question isn’t who is going to let me; it’s who is going to stop me.","author":"Ayn Rand"},
                    {
                        "quote":"When everything seems to be going against you, remember that the airplane takes off against the wind, not with it.","author":"Henry Ford"},
                    {
                        "quote":"It’s not the years in your life that count. It’s the life in your years.","author":"Abraham Lincoln"},
                    {
                        "quote":"Change your thoughts and you change your world.","author":"Norman Vincent Peale"},
                    {
                        "quote":"Either write something worth reading or do something worth writing.","author":"Benjamin Franklin"},
                    {
                        "quote":"Nothing is impossible, the word itself says, “I’m possible!”","author":"Audrey Hepburn"},
                    {
                        "quote":"The only way to do great work is to love what you do.","author":"Steve Jobs"},
                    {
                        "quote":"If you can dream it, you can achieve it.","author":"Zig Ziglar"}],
                currentQuote:""
            };
            this.getRandomQuote = this.getRandomQuote.bind(this)
        }
        componentDidMount(){
            this.getRandomQuote();
        }
        getRandomQuote(){
            const {quotes} = this.state;
            this.setState({currentQuote:quotes[Math.floor(Math.random() * quotes.length)]});

        }
        render(){
            const {quote,author} = this.state.currentQuote;
            return <div id="quote-box">
                <p id="text">{quote}</p>
                <p id="author">- {author}</p>
                <button id="new-quote" onClick={this.getRandomQuote}>New Quote</button>
                <a href="twitter.com/intent/tweet" id="tweet-quote">Tweet    </a>
            </div>
        }
    }
    ReactDOM.render(<App/>,document.getElementById('app'));
</script>